import { PureComponent } from 'react';
import {
  Scene, PerspectiveCamera, BoxGeometry,
  MeshBasicMaterial, Mesh, WebGLRenderer
} from 'three';

class Index extends PureComponent {

  componentDidMount() {
    //创建场景
    const scene = new Scene();

    //创建相机
    const camera = new PerspectiveCamera(45, 4 / 3, 1, 1000);
    //设置相机
    camera.position.set(0, 0, 5);
    //添加到场景中
    scene.add(camera);

    //创建几何体
    const boxGeometry = new BoxGeometry(1, 2, 3);
    //设置材质
    const meshBasicMaterial = new MeshBasicMaterial({
      color: 0xff0000
    });
    //创建网格
    const mesh = new Mesh(boxGeometry, meshBasicMaterial);
    //添加到场景中
    scene.add(mesh);

    //渲染
    //获取canvas
    const canvas = document.getElementById('mainCanvas');
    //创建渲染器
    const renderer = new WebGLRenderer({
      canvas
    });
    //执行渲染操作
    renderer.render(scene, camera);

  }

  render() {

    return (
      <canvas
        id="mainCanvas"
        width="400px"
        height="300px"
      />
    );
  }
}

export default Index;